<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-button primary @click="back">《返回</el-button>
      </el-col>
      <el-col :span="8">
        <el-row justify="end">
          <el-button type="primary" @click="coachSign">教练签到</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding-top: 20px">
      <el-col :span="24">
        <!--接口获取到之后，重新绑定data :data="Datalist.ComList" -->
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="userName" label="姓名" align="center" />
          <el-table-column prop="phone" label="电话" align="center" />
          <el-table-column
            prop="appointmentNumber"
            label="人数"
            align="center"
          />

          <el-table-column prop="classTime" label="上课时间" align="center" />
          <el-table-column
            prop="signedStatus"
            label="状态"
            align="center"
            :formatter="state"
          >
          </el-table-column>

          <el-table-column
            prop="appointmentTime"
            label="预约时间"
            align="center"
          />
          <el-table-column
            prop="appointmentRecordId"
            label="操作"
            align="center"
          >
            <template #default="scope">
              <el-button
                @click="sign(scope.row)"
                type="primary"
                link
                v-if="scope.row.signedStatus === 0"
                >签到</el-button
              >
              <el-button type="primary" link :disabled="true" v-else
                >已签到</el-button
              >
              <el-button @click="cancel(scope.row)" type="primary" link
                >取消预约</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row style="padding-top: 20px">
      <el-col :span="4" :offset="20">
        <el-pagination background layout="prev, pager, next" />
      </el-col>
    </el-row>
    <!-- //弹窗 -->
    <el-dialog
      v-model="show"
      :title="signs ? '确认签到' : '取消预约'"
      width="30%"
      align-center
    >
      <div>
        <span v-if="signs">确定要为会员签到吗？</span>
        <span v-if="!signs">确定取消预约吗？</span>
      </div>

      <template #footer>
        <span courseName="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="sure(signs)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 查詢 -->
</template>
<script lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { getDetail } from "../../http/api"; //导入接口
import { UserSign, cancelSigns } from "../../http/api"; //签到和取消预约
import { ListData, listInt } from "../../type/booking"; //导入type规范
// import { InitData} from "../../type/Booking";
import router from "../../router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router"; //当前活跃路由

export default {
  setup() {
    onMounted(() => {
      //挂载时就获取数据
      getList();
    });
    //路由的数据
    const route = useRoute();
    const query: any = route.query;
    // console.log(query.id);
    const courseId = query.id;
    //获取表格数据接口
    const getList = () => {
      getDetail({ courseId }).then((res) => {
        // console.log(res);
        data.list = res.data.appointmentRecordVoList;
        //处理后端数据中的时间戳（毫秒类型）
        data.list.forEach((el) => {
          if (el.appointmentTime) {
            el.appointmentTime = new Date(el.appointmentTime).toLocaleString();
          }
        });
        // console.log(data.list)
      });
    };

    const centerDialogVisible = ref(false);
    const back = () => {
      router.push("/record");
    };
    //教练签到
    const coachSign=()=>{
      alert("教练签到")
    }
    const show = ref<boolean>(false);
    const signs = ref<boolean>(false);
    const booking = ref<boolean>(false);
    let appointmentRecordId = "";
    //签到
    const sign = (row: any) => {
      show.value = true;
      signs.value = true;
      appointmentRecordId = row.appointmentRecordId;
      console.log(appointmentRecordId);
    };
    //签到状态
    const state = (row, column) => {
      if (row.signedStatus === 1) {
        return "已签到";
      } else {
        return "未签到";
      }
    };
    //取消预约
    const cancel = (row: any) => {
      show.value = true;
      signs.value = false;
      appointmentRecordId = row.appointmentRecordId;
      //重新获取表格数据，用于取消预约后完成页面数据刷新
      getList();
    };
    const close = () => {
      show.value = false;
      ElMessage({
        message: "已取消操作",
        type: "info",
      });
    };

    const sure = (signs) => {
      //判断sings为签到反之是取消预约

      if (signs) {
        console.log(appointmentRecordId);
        UserSign({ appointmentRecordId }).then((res: any) => {
          console.log(res);
          if (res.code == 0) {
            ElMessage({
              message: "签到成功",
              type: "success",
            });
            show.value = false;
          }
          getList();
        }); //请求签到接口
      } else {
        console.log(appointmentRecordId);
        cancelSigns({ appointmentRecordId }).then((res: any) => {
          if (res.code == 0) {
            ElMessage({
              message: "已取消预约",
              type: "success",
            });
            show.value = false;
          }
          getList();
        }); //请求取消接口
      }
    };

    //实例化ListData对象
    const data = reactive(new ListData());

    return {
      ...toRefs(data),
      // ...toRefs(data2),//路由传参
      watch,
      courseId,
      back,
      sign,
      cancel,
      show,
      close,
      signs, //签到状态
      state,
      booking, //预约状态
      sure,
      coachSign,//教练签到
      centerDialogVisible,
    };
  },
};
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
